<script setup>
import { ref, onMounted } from 'vue';
import { Search } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import { recycleBinPage, recover, delrecycImg } from '@/utils/api.js'
let areaId = '';
const totalElements = ref(0);
let pageNum = 1;
const currentPage = ref(1);
const date = ref('');
const rblist = ref([])
const handleSizeChange = (val) => {
    pageNum = val;
    getrecycleBinPage();
};

const recoverda = async (data) => {
    let res = await recover(data)
    if (res.code == '200') {
        ElMessage({
            type: 'success',
            message: '该文件已恢复成功',
        })
        getrecycleBinPage();
    }
}

const formatProcessingTime = (data) => {
    if (data != null && data != '') {
        let datetime = new Date(data);
        let year = datetime.getFullYear();
        let month = datetime.getMonth() + 1;
        let date = datetime.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (date >= 0 && date <= 9) {
            date = "0" + date;
        }
        return year + "-" + month + "-" + date;
    } else {
        return ""
    }
}
const getrecycleBinPage = async () => {
    let params = '?areaId=' + areaId + '&date=' + formatProcessingTime(date.value) + '&pageNum=' + pageNum + '&pageSize=4'
    let res = await recycleBinPage(params)
    if (res.code == '200') {
        rblist.value = res.data.content;
        totalElements.value = res.data.totalElements;
    }
}

const scc = () => {
    pageNum = 1;
    currentPage.value = 1;
    getrecycleBinPage()
}

const del = (did) => {
    ElMessageBox.confirm(
        '永久删除该文件. 是否继续?',
        '删除文件',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            delrecycImg(did).then(res => {
                if (res.code == '200') {
                    getrecycleBinPage();
                    ElMessage({
                        type: 'success',
                        message: '删除成功',
                    })
                }
            })

        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}

onMounted(() => {
    areaId = window.sessionStorage.getItem('areaId');
    getrecycleBinPage()
})
</script>
<template>
    <div class="wls-aut">
        <div class="wls-aut-title">
            <div style="font-weight: 700;"><span>回收站</span></div>
            <div style="margin-left: 0.16rem;" v-if="false">
                <span>总计</span>
                <span style="color: var(--wls-color);margin-left: 0.08rem;">23339845566张</span>
            </div>
        </div>

        <div class="wls-aut-container">
            <div class="bcb">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-date-picker size="large" style="width: 100%;" @change="scc()" v-model="date" clearable
                            type="date" placeholder="选择日期" />
                    </el-col>
                    <el-col :span="4" style="text-align: right;" v-if="false">
                        <el-input v-model="input" style="width: 100%;" size="large" placeholder="搜索物种"
                            class="input-with-select">
                            <template #append>
                                <el-button :icon="Search" />
                            </template>
                        </el-input>
                    </el-col>
                </el-row>
                <div style="height:.24rem"></div>
                <table>
                    <thead>
                        <tr style="border: none;">
                            <th>图片/视频</th>
                            <th>相机编号</th>
                            <th>拍摄时间</th>
                            <th>删除人</th>
                            <th>删除时间</th>
                            <th>有效期30天 </th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr style="line-height: 1.5rem;" v-for="(i, index) in rblist" :key="i.id">
                            <td>
                                <div class="wls-rb">
                                    <video v-if="$wlsf.filiv(i.accessorySrc) == 4" :src="i.accessorySrc" controls
                                        alt=""></video>
                                    <el-image v-else style="width: 1rem; height:1.2rem" :src="i.accessorySrc"
                                        :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
                                        :preview-src-list="[i.accessorySrc]" fit="cover" />
                                </div>
                            </td>
                            <td>{{ i.imei }}</td>
                            <td>{{ i.shootingTime }}</td>
                            <td>{{ i.delUsername }}</td>
                            <td>{{ i.delTimeStr }}</td>
                            <td><span style="color: #F84848;">{{ i.expirationDate }}</span></td>
                            <td>
                                <!-- <span style="color: var(--wls-color);margin-right: 0.16rem;">鉴定</span> -->
                                <span style="color: var(--wls-color);margin-right: 0.16rem;"
                                    @click.stop="recoverda(i.id)">恢复</span>
                                <span style="color: #F84848;" @click.stop="del(i.id)">删除</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <el-pagination v-model:current-page="currentPage" :page-size="4" :small="true" :disabled="false"
                    background layout="total, prev, pager, next, jumper" :total="totalElements"
                    @current-change="handleSizeChange" />
            </div>
        </div>
    </div>
</template>
<style scoped>
.wls-rb {
    width: 100%;
    /* height: 0.66rem; */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
    overflow: hidden;
}

.wls-rb img {
    width: 1rem;
    height: 0.6rem;
}

.wls-rb video {
    width: 3rem;
    height: 1.3rem;
}

th,
td {
    width: calc(100% / 7);
}
</style>